<!-- 文件预览 -->
<template>
  <div>
    <ul class="el-upload-list el-upload-list--picture-card">
      <li
        v-for="item in fileList"
        :key="item.url"
        class="el-upload-list__item is-success"
      >
        <img
          v-if="isImageByUrl(item.url)"
          :src="item.url"
          alt=""
          class="el-upload-list__item-thumbnail"
        />
        <video
          v-else-if="isVideoByUrl(item.url) || isAduioByUrl(item.url)"
          class="mp3-player"
          :poster="isVideoByUrl(item.url) ? null : isAudioImg"
          style="width: 100%; height: 100%"
        >
          <source :src="item.url" />
          <source />
        </video>
        <img
          v-else-if="isExcelByUrl(item.url)"
          src="./images/excel.png"
          class="file-icon"
          alt=""
        />
        <img
          v-else-if="isPdfByUrl(item.url)"
          src="./images/pdf.png"
          class="file-icon"
          alt=""
        />
        <img
          v-else-if="isPptByUrl(item.url)"
          src="./images/ppt.png"
          class="file-icon"
          alt=""
        />
        <img
          v-else-if="isWordByUrl(item.url)"
          src="./images/word.png"
          class="file-icon"
          alt=""
        />
        <img
          v-else-if="isZipByUrl(item.url)"
          src="./images/zip.png"
          class="file-icon"
          alt=""
        />
        <img v-else src="./images/other.png" class="file-icon" alt="" />
        <!-- <i v-else class="file-icon el-icon-document"></i> -->
        <span class="el-upload-list__item-actions">
          <span
            v-if="mode !== 'edit'"
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(item)"
          >
            {{ item.name }}
            <!-- <i v-if="isImageByUrl(item.url)" class="el-icon-view"></i>
            <i v-else-if="isVideoByUrl(item.url) ||isAduioByUrl(item.url)" class="el-icon-video-play"></i>
            <i v-else class="el-icon-paperclip"></i> -->
          </span>
          <span
            v-if="mode === 'edit'"
            class="el-upload-list__item-delete"
            @click="handleRemove(item)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </li>
    </ul>
    <c-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      append-to-body
      top="5vh"
      width="800px"
      destroy-on-close
      title="查看"
    >
      <img v-if="isImageByUrl(elsrc)" :src="elsrc" width="100%" alt />
      <video
        ref="video"
        v-if="isVideoByUrl(elsrc)"
        :src="elsrc"
        style="width: 100%; height: 500px"
        controls="controls"
        controlslist="nodownload"
        width="100%"
        height="50%"
      ></video>
      <audio
        ref="audio"
        v-if="isAduioByUrl(elsrc)"
        :src="elsrc"
        controls="controls"
        controlslist="nodownload"
        style="width: 100%"
      ></audio>
    </c-dialog>
  </div>
</template>

<script>
import {
  isVideoByUrl,
  isImageByUrl,
  isAduioByUrl,
  isExcelByUrl,
  isPdfByUrl,
  isZipByUrl,
  isPptByUrl,
  isWordByUrl,
  download,
} from "./utils.js";

export default {
  name: "FileView",
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    mode: {
      type: String,
      default: "view",
    },
  },
  components: {},
  data () {
    return {
      elsrc: "",
      isVideoByUrl,
      isImageByUrl,
      isAduioByUrl,
      isExcelByUrl,
      isPdfByUrl,
      isPptByUrl,
      isWordByUrl,
      isZipByUrl,
      dialogVisible: false,
    };
  },

  computed: {
    isAudioImg () {
      return require("./images/mp3.png");
    },
  },

  mounted () { },
  watch: {
    dialogVisible (val) {
      // 关闭后暂停视频
      let { video, audio } = { ...this.$refs };
      if (!val) {
        if (video) {
          video.pause();
        }
        if (audio) {
          audio.pause();
        }
      }
    },
  },

  methods: {
    handlePictureCardPreview (file) {
      this.elsrc = file.url;
      const canOpen =
        isVideoByUrl(this.elsrc) ||
        isImageByUrl(this.elsrc) ||
        isAduioByUrl(this.elsrc);

      if (canOpen) {
        this.dialogVisible = true;
      } else {
        download(file.url, file.name);
      }
    },
    handleRemove (file) {
      this.$emit("remove", file, this.fileList);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-upload-list {
  .el-upload-list__item {
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
  }
  .file-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: $--color-primary;
    font-size: 30px;
  }
  .el-upload-list__item-actions {
    .el-upload-list__item-preview {
      font-size: 12px;
    }
  }
}
.mp3-player {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
</style>
